<!--
 * @Description:
 * @Author: 崔堂袁
 * @Date: 2021-04-16 16:12:00
 * @LastEditTime: 2021-04-24 13:31:09
-->
<template>
  <div id="app">
    <router-view />
  </div>
</template>
<script>
import { useI18n } from 'vue-i18n'
import { useStore } from 'vuex'
export default {
  setup () {
    // ---------------语言初始化------------
    const { locale } = useI18n()
    if (localStorage.getItem('language')) locale.value = localStorage.getItem('language')
    else locale.value = 'ch'
    // ---------------主题初始化------------
    const store = useStore()
    // 修改vuex中主题图标路径
    const changeThemeSrc = (newSrc) => store.commit('themeColorControl/changeThemeIconSrc', newSrc)
    // 改变antd组件颜色主题
    const changeAntdPrimaryColor = primaryColor => {
      window.less.modifyVars({
        '@primary-color': primaryColor
      })
    }
    // 改变less变量颜色值
    const changeLessColor = () => {
      document.getElementsByTagName('body')[0].style.setProperty('--baseColor', localStorage.getItem('baseColor'))
      document.getElementsByTagName('body')[0].style.setProperty('--activeColor', localStorage.getItem('activeColor'))
      document.getElementsByTagName('body')[0].style.setProperty('--fontColor', localStorage.getItem('fontColor'))
    }
    if (localStorage.getItem('userThemeColor')) { // 判断localStorage中是否有用户缓存？有：应用；没有：用默认的主题
      const color = localStorage.getItem('userThemeColor') //   取出用户缓存主题颜色名
      const primaryColor = localStorage.getItem('antdPrimaryColor') // 取出用户缓存的antd组件颜色
      changeThemeSrc(require(`@/assets/themeIcons/theme-${color}.png`)) // 修改图标路径
      changeAntdPrimaryColor(primaryColor)
      changeLessColor()
    }
  }
}
</script>
<style lang="less">
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: #2c3e50;
  padding: 0;
  margin: 0;
  user-select: none;
}
</style>
